function $(id){
	return document.getElementById(id);
}


function on(el, type, fn){
	if(el.addEventListener){
		el.addEventListener(type, fn, false);
	}else if(el.attachEvent){
		el.attachEvent('on'+type, fn);
	}else{
		el['on'+type] = fn;
	}
}
var input = $('input');
var left_in = $('left-in');
var right_in = $('right-in');
var left_out = $('left-out');
var right_out = $('right-out');
var wrap = $('wrap');
var num;

function _valiadation(){
	if(input.value.trim().length > 0 && !isNaN(input.value)){
		return true;
	}else{
		return false;
	}
}

function _setNum(){
	if(_valiadation()){
		num = input.value;
	}
}

function rightIn(){
	_setNum();
	wrap.innerHTML += '<span>' + input.value + '</span>';
}

function leftIn(){
	_setNum();
	if(wrap.firstChild){
		var text = document.createTextNode(input.value);
		var span = document.createElement('span');
		span.appendChild(text);
		wrap.insertBefore(span,wrap.children[0]);
	}else{
		wrap.innerHTML = '<span>' + input.value + '</span>';
	}
}

function leftOut(){
	if(wrap.firstChild){
		wrap.removeChild(wrap.firstChild);
	}
}

function rightOut(){
	if(wrap.lastChild){
		wrap.removeChild(wrap.lastChild);
	}
}

function removeNum(e){
	var e = window.event || e;
	if(e.target.nodeName.toLowerCase() === 'span'){
		e.target.parentNode.removeChild(e.target);
	}
}

function init(){
	on(left_in, 'click', leftIn);
	on(right_in, 'click', rightIn);
	on(left_out, 'click', leftOut);
	on(right_out, 'click', rightOut);
	on(wrap, 'click', removeNum);
}

init();